<template>
      
  <div>
    <van-nav-bar
      title="食物健康检测"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active">
      <van-tab :title="'建议少吃' + sum.num1">
        <h3 class="h31">以下食物升糖指数爆炸，绝对建议少吃</h3>
        <van-row>
          <van-col
            span="24"
            class="col"
            v-for="(item, index) in $store.state.stdata"
            :key="index"
            v-show="item.category_id == 1"
          >
            <div class="big">
              <div class="matter">
                <img :src="item.imgUrl" alt="" />
                <span>{{ item.name }}</span>
              </div>
              <span>升糖指数：{{ item.glycemicIndex }}</span>
            </div>
            <p>{{ item.content }}</p>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab :title="'适量食用' + sum.num2">
            <h3 class="h32">以下食物升糖指数爆炸，绝对建议少吃</h3>
        <van-row>
          <van-col
            span="24"
            class="col"
            v-for="(item, index) in $store.state.stdata"
            :key="index"
            v-show="item.category_id == 2"
          >
            <div class="big">
              <div class="matter">
                <img :src="item.imgUrl" alt="" />
                <span>{{ item.name }}</span>
              </div>
              <span>升糖指数：{{ item.glycemicIndex }}</span>
            </div>
            <p>{{ item.content }}</p>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab :title="'放心食用' + sum.num3">
            <h3 class="h33">以下食物升糖指数偏低，可以放心食用</h3>
        <van-row>
          <van-col
            span="24"
            class="col"
            v-for="(item, index) in $store.state.stdata"
            :key="index"
            v-show="item.category_id == 3"
          >
            <div class="big">
              <div class="matter">
                <img :src="item.imgUrl" alt="" />
                <span>{{ item.name }}</span>
              </div>
              <span>升糖指数：{{ item.glycemicIndex }}</span>
            </div>
            <p>{{ item.content }}</p>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
        
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  computed: {
    sum() {
      let allsum = { num1: 0, num2: 0, num3: 0 };
      this.$store.state.stdata.forEach((item, index) => {
        if (item.category_id == 1) {
          allsum.num1++;
        } else if (item.category_id == 2) {
          allsum.num2++;
        } else if (item.category_id == 3) {
          allsum.num3++;
        }
      });
      return allsum;
    },
  },
};
</script>

<style lang='scss'>
.big{
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.big span{
    font-weight: 800;
  
}
.matter {
  display: flex;
  align-items: center;
}
.matter img {
  width: 80px;
  height: 60px;
}
.matter span {
  font-weight: 800;
  margin-left: 10px;
}
.h31{
    color: red;
}
.h32{
    color: orange;
}
.h33{
    color: green;
}
.col p{
    font-size: 14px;
}
</style>
